<template>
  <!-- 添加或修改岗位对话框 -->
  <el-dialog
    title="选择艺人"
    :visible.sync="visible"
    width="900px"
    append-to-body
    :close-on-click-modal="false"
  >
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="标签" prop="name">
        <el-select v-model="queryParams.labs" multiple placeholder="选择标签">
          <el-option
            v-for="item in labsOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      :default-sort="{ prop: 'height' }"
    >
      <el-table-column type="selection" width="55"> </el-table-column>

      <el-table-column label="姓名" align="center" prop="name" />
      <el-table-column label="性别" align="center" prop="sex" />
      <el-table-column label="标签" align="center" min-width="200">
        <template slot-scope="scope">
          <el-tag
            style="display: inline-block; margin-bottom: 4px; margin-right: 4px"
            v-for="tag in scope.row.labNames"
            :key="tag"
          >
            {{ tag }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="身高" align="center" prop="height" sortable />
      <el-table-column label="籍贯" align="center" prop="hometown" />
      <el-table-column label="昵称/外号" align="center" prop="nickName" />
      <el-table-column label="联系方式" align="center" prop="phone" />
      <el-table-column label="有/无经纪公司" align="center" prop="agent" min-width="200" />
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="changePage"
    />
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getCandidateAddList, addCandidate } from '@/api/system/candidate'
export default {
  dicts: ['sys_normal_disable', 'sys_project_platform'],
  props: {
    labsOption: {
      type: Array,
      default: () => []
    }
  },
  mixins: [],
  components: {},
  data() {
    return {
      queryParams: {
        labs: [],
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      visible: false,
      projectId: '',
      tableData: [],
      multipleSelection: []
    }
  },
  computed: {
    // Your computed here
  },
  watch: {
    // Your watch here
  },
  methods: {
    changePage() {
      this.getList(this.projectId)
    },
    open(projectId) {
      this.visible = true
      this.projectId = projectId
      this.getList()
    },
    // 取消按钮
    cancel() {
      this.visible = false
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    getList() {
      getCandidateAddList({
        projectId: this.projectId,
        ...this.queryParams
      }).then(response => {
        this.tableData = response.rows
        this.total = response.total
      })
    },
    /** 提交按钮 */
    submitForm() {
      addCandidate({
        projectId: this.projectId,
        artistIds: this.multipleSelection.map(item => item.id)
      }).then(response => {
        this.$modal.msgSuccess('添加成功')
        this.visible = false
        this.$emit('update')
      })
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    }
  },
  created() {
    // console.log('Component created');
  },
  mounted() {
    // console.log('Component created');
  }
}
</script>

<style scoped>
/* Your styles here */
.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
